<template>
  <view class="settings-container">
    <view class="settings-group">
      <text class="group-title">游戏设置</text>
      
      <view class="setting-item">
        <text>每方时间（分钟）</text>
        <picker :range="timeOptions" :value="timeIndex" @change="onTimeChange">
          <view class="picker">{{ timeOptions[timeIndex] }}</view>
        </picker>
      </view>
      
      <view class="setting-item">
        <text>每步加时（秒）</text>
        <picker :range="incrementOptions" :value="incrementIndex" @change="onIncrementChange">
          <view class="picker">{{ incrementOptions[incrementIndex] }}</view>
        </picker>
      </view>
      
      <view class="setting-item">
        <text>音效开关</text>
        <switch :checked="soundEnabled" @change="onSoundToggle"/>
      </view>
    </view>

    <view class="settings-group">
      <text class="group-title">界面设置</text>
      
      <view class="setting-item">
        <text>棋盘主题</text>
        <picker :range="themeOptions" :value="themeIndex" @change="onThemeChange">
          <view class="picker">{{ themeOptions[themeIndex] }}</view>
        </picker>
      </view>
      
      <view class="setting-item">
        <text>棋子样式</text>
        <picker :range="pieceStyleOptions" :value="pieceStyleIndex" @change="onPieceStyleChange">
          <view class="picker">{{ pieceStyleOptions[pieceStyleIndex] }}</view>
        </picker>
      </view>
    </view>

    <button class="save-btn" @tap="saveSettings">保存设置</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      timeOptions: ['10', '15', '30', '45', '60'],
      incrementOptions: ['0', '5', '10', '15', '30'],
      themeOptions: ['经典', '木质', '大理石', '深色'],
      pieceStyleOptions: ['标准', '简约', '3D', '卡通'],
      timeIndex: 1,
      incrementIndex: 2,
      themeIndex: 0,
      pieceStyleIndex: 0,
      soundEnabled: true
    }
  },

  async onLoad() {
    await this.loadSettings()
  },

  methods: {
    // 加载设置
    async loadSettings() {
      try {
        const settings = await uni.getStorage({ key: 'chess_settings' })
        if (settings.data) {
          const savedSettings = JSON.parse(settings.data)
          this.timeIndex = savedSettings.timeIndex || 1
          this.incrementIndex = savedSettings.incrementIndex || 2
          this.themeIndex = savedSettings.themeIndex || 0
          this.pieceStyleIndex = savedSettings.pieceStyleIndex || 0
          this.soundEnabled = savedSettings.soundEnabled !== undefined ? savedSettings.soundEnabled : true
        }
      } catch (error) {
        console.error('加载设置失败:', error)
      }
    },

    // 保存设置
    async saveSettings() {
      const settings = {
        timeIndex: this.timeIndex,
        incrementIndex: this.incrementIndex,
        themeIndex: this.themeIndex,
        pieceStyleIndex: this.pieceStyleIndex,
        soundEnabled: this.soundEnabled
      }

      try {
        await uni.setStorage({
          key: 'chess_settings',
          data: JSON.stringify(settings)
        })
        uni.showToast({
          title: '设置保存成功',
          icon: 'success'
        })
        // 通知游戏页面更新设置
        uni.$emit('settings-updated', settings)
      } catch (error) {
        console.error('保存设置失败:', error)
        uni.showToast({
          title: '保存失败',
          icon: 'error'
        })
      }
    },

    onTimeChange(e) {
      this.timeIndex = e.detail.value
    },

    onIncrementChange(e) {
      this.incrementIndex = e.detail.value
    },

    onThemeChange(e) {
      this.themeIndex = e.detail.value
    },

    onPieceStyleChange(e) {
      this.pieceStyleIndex = e.detail.value
    },

    onSoundToggle(e) {
      this.soundEnabled = e.detail.value
    }
  }
}
</script>

<style>
.settings-container {
  padding: 20rpx;
}

.settings-group {
  background: #fff;
  border-radius: 10rpx;
  margin-bottom: 20rpx;
  padding: 20rpx;
}

.group-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
  display: block;
}

.setting-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #eee;
}

.setting-item text {
  font-size: 28rpx;
  color: #666;
}

.picker {
  font-size: 28rpx;
  color: #333;
  padding: 10rpx 20rpx;
  border: 1rpx solid #ddd;
  border-radius: 6rpx;
}

.save-btn {
  margin-top: 40rpx;
  background: #4a90e2;
  color: white;
  border-radius: 8rpx;
  padding: 20rpx 0;
}
</style> 